<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-heading>{{title}}</e-heading>
      <train-opera-process v-if="isHasProcessShow"/>
      <el-row>
        <el-col :span="6" v-for="(item,index) in matchList" :key="index">
          <router-link class="sport-item" :to="item.path">
            <e-img-match :src="item.imageUrl" alt="" />
            <div class="m_name">{{item.name}}</div>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import trainApi from 'api/train'
  import TrainOperaProcess from 'views/help/TrainOperaProcess'

  import {
    SELECT_CATE_ENUM,
    MATCH_CATE_LIST,
    TRAIN_CATE_LIST
  } from './constant'

  const DEFAULT_CATE_LIST = [
    {
      imageUrl: '/static/images/service/type/product.png',
      name: '商品',
      path: '/service/release'
    }
    // 赛事培训已展开类目
    // {
    //   imageUrl: '/static/images/service/type/activity.png',
    //   name: '活动',
    //   path: '/service/release/activity'
    // }
  ]
  export default{
    components: {
      TrainOperaProcess
    },
    computed: {
      ...mapGetters({
        global: 'global',
        authorize_list: 'authorize_list'
      }),
      releaseType () {
        return this.$route.params.type
      }
    },
    watch: {
      releaseType () {
        // 防止切换发布类型时，页面没有重新渲染
        this._initData()
      }
    },
    created () {
      this._initData()
    },
    data () {
      return {
        title: '发布服务',
        isHasProcessShow: false, // 操作指引
        matchList: []
      }
    },
    methods: {
      _initData () {
        let type = this.$route.params.type
        let basePath = `/service/release/${type}/edit`
        switch (type) {
          case SELECT_CATE_ENUM.MATCH:
            this.title = '发布赛事'
            this.matchList = MATCH_CATE_LIST.map(item => {
              item.path = `${basePath}?cateCode=${item.cateCode}`
              return item
            })
            break
          case SELECT_CATE_ENUM.TRAIN:
            this.title = '发布课程'
            this.isHasProcessShow = true
            // 判断是否有校区
            trainApi.schoolList({}).then((res) => {
              // let path = res.data.list.length ? '/service/release/activity' : '/service/transit'
              this.matchList = TRAIN_CATE_LIST.map(item => {
                item.path = res.data.list.length ? `${basePath}?cateCode=${item.cateCode}` : '/service/transit'
                return item
              })
            })
            break
          case SELECT_CATE_ENUM.TICKET:
            this.title = '发布票务'
            this.matchList = DEFAULT_CATE_LIST.map(item => {
              item.path = basePath
              return item
            })
            break
          default:
            this.matchList = DEFAULT_CATE_LIST
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .sport-item {
    text-align: center;
    width: 100%;
    display: block;
    &:hover{
      color:$color-primary;
    }
    .m_name {
        padding: 20px 0;
    }
  }
</style>
